<template>
	<div :class="'page_common_header'+(isShow ? ' on' : '')" v-if="!/nodata/.test(webType)">
		<div class="common_header_item">
			<!--a href="javascript:;" v-if="webType === 'home'" @click="updateimgClickHandle">
				<span class="icon updateimage"></span>
			</a-->
			<a href="javascript:;" v-if="webType !== 'home'" @click="gobackClickHandle">
				<span class="icon goback"></span>
			</a>
		</div>
		<div class="common_header_item">
			<a href="javascript:;" @click="gotopClickHandle">
				<span>{{!isShow ? appTitle : '点击返回页首'}}</span>
			</a>
		</div>
		<div class="common_header_item">
			<!--a href="javascript:;" v-if="webType === 'home'" @click="goMapClickHandle">
				<span class="icon search"></span>
			</a-->
		</div>
	</div>
</template>
<script>
	export default {
		name: 'common_header',
		props:['appTitle', "webType"],
		data: function(){
			return {
				isShow:false
			}
		},
		mounted:function(){
			let that = this;
			that.throttleload = throttle(() => {
				that._scrollHandler()
			}, 100);
			window.addEventListener('scroll', that.throttleload);
			console.log(this.$route)
		},
		methods:{
			gobackClickHandle(){
				/videoview/.test(this.$route.name) ? this.$router.push('/videos') : this.$router.push('/')
			},
			gotopClickHandle(){
				window.scrollTo(1,1)
			},
			_scrollHandler:function(){
				let top = getScrollTop();
				if (top > 100){
					this.$set(this, "isShow", true);
				}else{
					this.$set(this, "isShow", false);
				}
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.page_common_header{
		display:flex;
		z-index: 99998;
		height:60/@base;
		padding:5/@base 20/@base;
		position: fixed;
		top:0;
		left:0;
		right:0;
		background-color: #fff;
		&.on{
			background-color: rgba(255,255,255, 0);
			position: fixed;
			top:20/@base;
			left:0;
			right:0;
			transition: top .5s;
			.common_header_item{
				background-color: rgba(176,224,230, .8);
				border-radius: 60/@base;
				&:first-child{
					opacity: 0
				}
				&:last-child{
					opacity: 0
				}
			}
			&::before {
				background-color: rgba(0,0,0,0);
			}
		}
		&::before {
		    background-color: rgba(0,0,0,.0975);
		    bottom: -1px;
		    content: '';
		    height: 1px;
		    left: 0;
		    position: absolute;
		    right: 0;
		}
		.common_header_item{
			width:80%;
			text-align: center;
			font-size: 20/@base;
			line-height: 64/@base;
			padding:0 10/@base;
			a{
				display:block;
				text-decoration: none;
				color:#333;
				width:100%;
				span{
					display:block;
					margin:0;
				}
			}
			&:first-child{
				width:56/@base;
				a{
					span{
						margin:15/@base auto 0 auto;
					}
				}
			}
			&:last-child{
				width:56/@base;
				a{
					span{
						margin:15/@base auto 0 auto;
					}
				}
			}
		}
	}
	.icon{
		&.updateimage{
			width:25px;
			height:25px;
			margin:5/@base 0 0 5/@base;
			background-size: 355px 344px;
			background-position: -75px -270px; 
		}
		&.shareinfo{
			width:25px;
			height:25px;
			margin:5/@base 0 0 5/@base;
			background-size: 355px 344px;
			background-position: -123px -227px;
		}
		&.goback{
			width:25px;
			height:25px;
			margin:5/@base 0 0 5/@base;
			background-size: 355px 344px;
   			background-position: -250px -295px;
		}
	}
</style>